// 大屏右侧时间组件
<template>
  <div>
    <div class="top"></div>
    <div class="timeBox">
      <!-- <iframe
      id="tianqi"
      scrolling="no"
      frameborder="0"
      allowtransparency="true"
      src="http://i.tianqi.com/index.php?c=code&a=getcode&id=34&h=25&w=280"
    >
    </iframe> -->
      <div id="tianqi">
        <span class="weatherCity">{{ weatherCity }}</span>

        &nbsp;

        <span>{{ weatherData.low + "-" + weatherData.high }}</span>

        &nbsp;

        <span>{{ weatherData.fengxiang }}</span>

        &nbsp;

        <span>{{ weatherData.type }}</span>
      </div>
      <div class="newtime">
        <span class="small">{{ smallTime }}</span>
        <span class="biger">{{ bigtTime }}</span>
      </div>
    </div>
    <div class="nav">
      <ul>
        <li
          v-for="item in navList"
          :key="item.id"
          @click="bind(item.id)"
          :class="{ active: item.id == myIndex }"
        >
          {{ item.navName }}
        </li>
      </ul>
    </div>
  </div>
</template>
<script>
import { get } from "@/api/screen/screen.js";
export default {
  props: ["navIndex"],

  data() {
    return {
      timer: "", // 时分秒
      smallTime: "",
      bigtTime: "", // 获取当前时间
      weatherCity: "杭州", // 当前城市
      weatherData: "",
      myIndex: this.navIndex,
      navList: [
        {
          id: 1,
          navName: "美丽乡村",
        },
        {
          id: 2,
          navName: "村民画像",
        },
        {
          id: 3,
          navName: "乡村土地",
        },
        {
          id: 4,
          navName: "乡村产业",
        },
        {
          id: 5,
          navName: "村民宜居",
        },
        {
          id: 6,
          navName: "村民自治",
        },
      ],
    };
  },
  methods: {
    getWeather() {
        get("http://wthrcdn.etouch.cn/weather_mini?city=" + this.weatherCity)
        .then((res) => {
          const result = res.data;
          let todayWeather = result.forecast[0];
          todayWeather.low = todayWeather.low.slice(2, 6);
          todayWeather.high = todayWeather.high.slice(2, 6);
          this.weatherData = todayWeather;
        });
    },
    appendZero(obj) {
      if (obj < 10) {
        return "0" + obj;
      } else {
        return obj;
      }
    },
    getSmallTime() {
      var _this = this; //声明一个变量指向Vue实例this，保证作用域一致
      this.timer = setInterval(function () {
        const date = new Date();
        _this.smallTime = //修改数据date
          _this.appendZero(date.getHours()) +
          ":" +
          _this.appendZero(date.getMinutes()) +
          ":" +
          _this.appendZero(date.getSeconds());
      }, 1000);
    },

    getBigtime() {
      var _this = this; //声明一个变量指向Vue实例this，保证作用域一致
      let weeks = [
        "星期日",
        "星期一",
        "星期二",
        "星期三",
        "星期四",
        "星期五",
        "星期六",
      ];
      const date = new Date();
      let wk = date.getDay();
      let week = weeks[wk];
      _this.bigtTime =
        date.getFullYear() +
        "年" +
        (date.getMonth() + 1) +
        "月" +
        date.getDate() +
        "日" +
        " " +
        week;
    },
    bind(index) {
      this.myIndex = index;
      switch (index) {
        // 美丽乡村
        case 1:
          this.$router.push("/mlxc");
          break;

        // 村民画像
        case 2:
          this.$router.push("/cmhx");
          break;

        // 乡村土地
        case 3:
          this.$router.push("/xctd");
          break;

        // 乡村产业
        case 4:
          this.$router.push("/xccy");
          break;

        // 村民宜居
        case 5:
          this.$router.push("/cmyj");
          break;

        // 村民自治
        case 6:
          this.$router.push("/cmzz");
          break;
      }
    },
  },
  //生命周期 - 创建完成（访问当前this实例）
  created() {
    this.getSmallTime();
    this.getBigtime();
    this.getWeather();
  },

  //生命周期 - 挂载完成（访问DOM元素）
  mounted() {},
  beforeDestroy() {
    if (this.timer) {
      clearInterval(this.timer); // 在Vue实例销毁前，清除我们的定时器
    }
  },
};
</script>

<style lang='scss' scoped>
@import url(../../style/reset.css);

.top {
  position: absolute;
  width: 100%;
  height: 113px;
  background: url(../../assets/screen/mlxc/top_header.png) no-repeat; 
}
.timeBox {
  width: 100%;
}
.newtime {
  position: absolute;
  right: 50px;
  top: 10px;
}
.small {
  color: #fff446;
  font-family: DS-Digital-Bold;
  letter-spacing: 0px;
  font-size: 36px;
  margin-right: 10px;
  font-weight: 500;
}
.biger {
  color: #fff;
}
#tianqi {
  position: absolute;
  left: 10px;
  color: #fff;
  height: 30px;
  padding: 20px;
  top: 10px;
}

#tianqi {
  text-indent: 1.8em;
}
#tianqi span:nth-child(1) {
  display: inline-block;
  font-size: 17px;
  color: skyblue;
  background: url(../../assets/screen/index/location.png) no-repeat -2px;
}
#tianqi span:nth-child(4) {
  color: #fff446;
}
.nav {
  position: relative;
  top: 100px;
  width: 100%;
  height: 100px;
}
.nav ul {
  display: flex;
  padding-top: 30px;
  justify-content: center;
  align-item: center;
}
.nav ul li {
  width: 154px;
  height: 61px;
  font-size: 24px;
  color: #fff;
  float: left;
  line-height: 61px;
  text-align: center;
  cursor: pointer;
  margin-right: 50px;
  background: url(../../assets/screen/mlxc/juxingbj.png) no-repeat;
}
.active {
  color: yellow !important;
}
</style>